<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container flex_betw">
      <div>站点经营统计</div>
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
        <el-form-item label="站点名称" prop="stationId">
           <el-select
               v-model="queryParams.stationId"
               placeholder="请选择站点名称"
               clearable
               style="width: 240px"
           >
             <el-option
                 v-for="item in stationList"
                 :key="item.id"
                 :label="item.label"
                 :value="item.id"
             />
           </el-select>
        </el-form-item>
        <el-form-item label="选择时间" prop="dateRange">
          <el-date-picker
            v-model="queryParams.dateRange"
            value-format="yyyy-MM-dd"
            type="daterange"
            :clearable="false"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="flex_hcneter_bet">
      <div class="tongji_item flex_zhcenter flex_column" :style="{'background-color': item.bgcolor,}"
      v-for="(item,index) in userStatic" :key="index">
        <div class="itles">{{item.label}}</div>
        <div class="value txt-ellipsis">{{item.value}}</div>
      </div>
    </div>

    <!-- 查询和其他操作 -->
    <div class="filter-container flex_betw" style="margin-top: 30px;">
      <div>24小时充电走势图</div>
      <el-form :model="queryParams1" ref="queryRef1" :inline="true" v-show="showSearch">
        <el-form-item label="站点名称" prop="stationId">
           <el-select
               v-model="queryParams1.stationId"
               placeholder="请选择站点名称"
               clearable
               style="width: 240px"
           >
             <el-option
                 v-for="item in stationList"
                 :key="item.id"
                 :label="item.label"
                 :value="item.id"
             />
           </el-select>
        </el-form-item>
        <el-form-item label="选择时间" prop="dateRange">
          <el-date-picker
            v-model="queryParams1.dateRange"
            value-format="yyyy-MM-dd"
            type="daterange"
            :clearable="false"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery1">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <div ref="hour24" style="height:450px;width:100%;" />
    </div>

    <!-- 查询和其他操作 -->
    <div class="filter-container flex_betw" style="margin-top: 30px;">
      <div>用户统计报表</div>
      <el-form :model="queryParams2" ref="queryRef2" :inline="true" v-show="showSearch">
        <el-form-item label="站点名称" prop="stationId">
           <el-select
               v-model="queryParams2.stationId"
               placeholder="请选择站点名称"
               clearable
               style="width: 240px"
           >
             <el-option
                 v-for="item in stationList"
                 :key="item.id"
                 :label="item.label"
                 :value="item.id"
             />
           </el-select>
        </el-form-item>
        <el-form-item label="选择时间" prop="dateRange">
          <el-date-picker
            v-model="queryParams2.dateRange"
            value-format="yyyy-MM-dd"
            type="daterange"
            :clearable="false"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery2">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery2">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div style="margin-bottom: 50px;">
      <div ref="userStai" style="height:450px;width:100%;" />
    </div>

  </div>
</template>

<script>
import { eaOperatSelect } from "@/api/station/operator";
import { dailyStationUser,hourlyStationCharging,stationOperation,stationOptionSelect, } from '@/api/report/station'
import { timesToYyMmDd1 } from "@/utils/time";
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/views/dashboard/mixins/resize'
export default {
  name: 'SiteOperat',
  dicts:[],
  data() {
    return {
      userStatic:[
        {label:'充电此时（单)',value:0,bgcolor:'#E7F4FE'},
        {label:'充电电量（度)',value:0,bgcolor:'#ECFEEF'},
        {label:'订单金额（元)',value:0,bgcolor:'#F1E4E4'},
        {label:'订单电费（元)',value:0,bgcolor:'#EDEDFF'},
        {label:'订单服务费（元)',value:0,bgcolor:'#FEF6E7'},
      ],
      list: [],
      total: 0,
      listLoading: true,
      queryParams: {//站点经营统计查询
        dateRange:[],
        stationId:null,
      },
      queryParams1: {//24小时充电走势图
        dateRange:[],
        stationId:null,
      },
      queryParams2: {//用户统计报表
        dateRange:[],
        stationId:null,
      },
      // 显示搜索条件
      showSearch: true,
      stationList:[],//电站数据
      hour24List:[],//24小时数据
      userList:[],//站点用户统计数据
    }
  },
  created() {
    this.stationOptionSelect()
    this.stationOperation()
    this.hourlyStationCharging()
    this.dailyStationUser()
  },
  methods: {
    async dailyStationUser(){//站点用户统计
      let queryParams2 = {...this.queryParams2}
      this.initTime(queryParams2,3)
      delete queryParams2.dateRange
      let res = await dailyStationUser(queryParams2)
      let data = res.data || []
      this.userList = data
      let legend = {
          left: 'center',
          top: '0',
          data: ["支付宝","微信（公众号+小程序)","APP" ]
        }
      let color = ["#4791FF","#02BC77","#FFD950"]
      let yAxis = [
        {
          type: 'value',
          min: 0,
          interval: 5,
          axisLabel: {
            show: true,
            formatter: '{value}',
            textStyle: {
              color: "#333",
            },
          },
        },
      ]
      let date = data.find(item=>item.type == 'date') || {}
      let wxList = data.find(item=>item.type == 'wxList') || {}
      let alipayList = data.find(item=>item.type == 'alipayList') || {}
      let appList = data.find(item=>item.type == 'appList') || {}
      let xAxisData = date.data || []
      let wx = wxList.data || []
      let zhifubao = alipayList.data || []
      let apps = appList.data || []
      let series = [
        {name: "支付宝",type: "bar",data: zhifubao,},
        {name: "微信（公众号+小程序)",type: "bar",data: wx,},
        {name: "APP",type: "bar",data: apps,},
      ]
      let jiedian = this.$refs.userStai
      var xArraylength = xAxisData.length;//获取返回数据的个数
      let dataZoom = [
          {
            type: 'slider',
            show: true,
            // 设置背景颜色
            backgroundColor: "#F1F1F1",
            // 设置选中范围的填充颜色
            fillerColor: "#A8A8A8",
            // 设置边框颜色
            borderColor: "#A8A8A8",
            // 是否显示detail，即拖拽时候显示详细数值信息
            showDetail: false,
            xAxisIndex: [0],
            bottom: 10,
            handleSize: 2,
            height: '13px',
            start: 0,
            end: this.computedPosition(9,xArraylength),
          },
          {
            type: 'inside',
            start: 40,
            end: 100
          },
          {
            type: 'slider',
            show: false,
            yAxisIndex: 0,
            filterMode: 'empty',
            width: 3,
            height: '70%',
            handleSize: 2,
            showDataShadow: false,
            left: '93%'
          },
          {
              // 没有下面这块的话，只能拖动滚动条，
              // 鼠标滚轮在区域内不能控制外部滚动条
              type: "inside",
              // 滚轮是否触发缩放
              zoomOnMouseWheel: false,
              // 鼠标滚轮触发滚动
              moveOnMouseMove: false,
              moveOnMouseWheel: false,
          },
        ]
      this.get24hourStatic({
        xAxisData,legend,color,series,jiedian,dataZoom,yAxis,
      })
    },
    initTime(queryParams,type){//初始化时间
      let day = new Date()
      let time = timesToYyMmDd1(day,'YY-MM-DD')
      let dateRange = queryParams.dateRange || []
      if(!dateRange.length) {
        queryParams.dateRange = [time,time]
        if(type == 1) this.queryParams = {...queryParams}
        if(type == 2) this.queryParams1 = {...queryParams}
        if(type == 3) this.queryParams2 = {...queryParams}
        dateRange = [time,time]
      }
      queryParams.startTime = dateRange[0]
      queryParams.endTime = dateRange[1]
    },
    async stationOptionSelect(){//电站下拉选择列表
      let res = await stationOptionSelect()
      this.stationList = res.data || []
    },
    async hourlyStationCharging(){//站点24小时充电走势
      let queryParams1 = {...this.queryParams1}
      this.initTime(queryParams1,2)
      delete queryParams1.dateRange
      let res = await hourlyStationCharging(queryParams1)
      let data = res.data || []
      this.hour24List = data
      let hourNum = data.find(item=>item.type == 'hourNum') || {}
      let chargingCount = data.find(item=>item.type == 'chargingCount') || {}
      let electricQuantity = data.find(item=>item.type == 'electricQuantity') || {}
      let xAxisData = hourNum.data || []
      let cdcs = chargingCount.data || []
      let cdds = electricQuantity.data || []
      let legend = {
          left: 'center',
          bottom: '0',
          data: ["充电次数","充电度数", ]
        }
      let color = ["#FF8352","#02BC77",]
      this.get24hourStatic({
        xAxisData,legend,color,
        series:[
          {
            name: "充电次数",
            type: "bar",
            data: cdcs,
          },
          {
            name: "充电度数",
            type: "line",
            yAxisIndex: 1,
            data: cdds,
          },
        ]
      })
    },
    get24hourStatic({xAxisData,legend,series,color,yAxis,jiedian,dataZoom}){//折线柱状混合图
      this.chart = this.chart = echarts.init(jiedian || this.$refs.hour24, 'macarons')
      this.chart.setOption({
        color,
        tooltip: {
          trigger: 'axis',
          formatter:(params)=> {
            let str = '';
            params.forEach((item, idx) => {
              str += `${item.marker}${item.seriesName}: ${item.data}`
              str += idx === params.length -1? '': '<br/>'
            })

            return str;
          },
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: legend || {
          left: 'center',
          bottom: '0',
          data: ["充电次数","充电度数", ]
        },
        grid: {
          left: '0',
          right: '0',
          height: '85%',
          bottom: '8%',
          backgroundColor: 'white',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#333",
              },
            },
          }
        ],
        yAxis: yAxis || [
          {
            type: 'value',
            name: '充电次数',
            min: 0,
            interval: 5,
            axisLabel: {
              show: true,
              formatter: '{value} 次',
              textStyle: {
                color: "#333",
              },
            },
          },
          {
            type: 'value',
            name: '充电度数',
            min: 0,
            interval: 5,
            axisLabel: {
              show: true,
              formatter: '{value} 度',
              textStyle: {
                color: "#333",
              },
            },
          },
        ],
        dataZoom:dataZoom || [],
        series,
      })
    },
    async stationOperation(){//站点经营统计
      let queryParams = {...this.queryParams}
      this.initTime(queryParams,1)
      delete queryParams.dateRange
      let res = await stationOperation(queryParams)
      let data = res.data || {}
      let userStatic = [...this.userStatic]
      userStatic[0].value = data.chargingCount || 0
      userStatic[1].value = data.electricQuantity || 0
      userStatic[2].value = data.payableAmount || 0
      userStatic[3].value = data.electricityAmount || 0
      userStatic[4].value = data.serviceAmount || 0
      this.userStatic = [...userStatic]
    },
    handleQuery() {
      this.stationOperation()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryRef");
      this.handleQuery();
    },
    handleQuery1() {
      this.hourlyStationCharging()
    },
    /** 重置按钮操作 */
    resetQuery1() {
      this.resetForm("queryRef1");
      this.handleQuery1();
    },
    handleQuery2() {
      this.dailyStationUser()
    },
    /** 重置按钮操作 */
    resetQuery2() {
      this.resetForm("queryRef2");
      this.handleQuery2();
    },
    computedPosition(length,xArraylength) {//三目运算方法，控制滚动条长度
        return Math.min(length, xArraylength) / xArraylength * 100;
    },
  }
}
</script>
<style scoped lang="scss">
.tongji_item{
  width: 19%;height: 10%;border-radius: 5px;
  box-sizing: border-box;padding: 25px 10px;
  .itles{margin-bottom: 30px;}
  .value{font-size: 35px;}
}
</style>
